<template>
  <!-- 外围最大的盒子 -->
  <div class="recharge">
    <!-- 左侧列表栏 -->
    <div class="box">
      <div class="myListtwo">
        <van-list class="myList">
          <van-cell
            title="充电库位"
            style="background-color: #1a1c25; color: #ffffff;fontSize:20px;fontWeight: 700;"
          />
          <van-cell
            @click="examine(item.id, item)"
            v-for="(item, index) in recordList"
            :class="[
              'tr-color-1' + (index % 2),
              { active: activeIndex === item.id },
            ]"
            :title="'充电点' + item.id"
            :key="index"
          >
            <van-icon
              name="close"
              size="28"
              color="#fff"
              @click="remove(item.id)"
          /></van-cell>
          <!-- <van-cell title="新建充电点" @click="addnew" class="newAdd" /> -->
        </van-list>
        <div
          id="new"
          style="background-color: #1a1c25; color: #26d473"
          @click="record"
        >
          +
        </div>
      </div>
      <div class="zhouimg">
      <img src="../../assets/zhou3.png" alt="">
    </div>
      <!-- 右侧内容区域 -->
      <conent
      :newactive='newactive'
        :newList="newList"
        @getGain="getGain"
        :recordList="recordList"
        :xshow="xshow"
        :yshow="yshow"
        @newxShow="newxShow"
        @newyShow="newyShow"
        @closeX='closeX'
        @closeY='closeY'
      ></conent>
    </div>

    <!-----------------------------------------------键盘区域 -->
    <template v-if="!yshow">
      <div class="keyboard-mask" v-if="xshow">
        <keyboard @onChange="Change" @onKeyPress="onKeyPress" />
      </div>
    </template>
    <template v-if="!xshow">
      <div class="keyboard-mask" v-if="yshow">
        <keyboard @onChange="onChange" @onKeyPress="onKeyPress" />
      </div>
    </template>
    <!-----------------------------------------------键盘区域 -->
  </div>
</template>

<script>
//弹出框
import { Dialog } from "vant";
//导入yaml格式进行转换
import yaml from "js-yaml";
// 导入库位点的接口
import { gainApi, recordApi, removeApi } from "@/api/record";
// 导入mock模拟数据
import { paramsList } from "@/api/mock";
//导入内容区域组件
import conent from "./components/conent.vue";
export default {
  // 注册内容组件
  components: {
    conent,
  },
  data() {
    return {
      newactive:false,
      xshow: false, //控制x轴输入框的显示和隐藏
      yshow: false, ///控制y轴输入框的显示和隐藏
      width: "",
      height: "",
      newx: "",
      newy: "",
      keysshow: false,
      keyshow: false,
      kuewiID: "", //记录库位点id
      radio: "", //点击后的双向绑定的数据
      formKey: 0, //清除表单的验证规则
      formShow: false, //控制表单的显示和隐藏
      recordList: [], //充电点数组列表
      paramsList: paramsList, //模拟数据
      activeIndex: null, //下标选择
      newList: "", //点击的标签列表这一项的内容
      isShow: false, //表单弹出层的显示和隐藏
      x: "",
      y: "",
      angle: "",
      // 进行输入的正则验证
      rules: {
        seatId: [
          { required: true },
          { pattern: /^[A-Za-z0-9]+$/, message: "请输入正确的id" },
        ],
        speed: [
          { required: true },
          { pattern: /^[0-9]+$/, message: "请输入纯数字" },
        ],
      },
      //列列表信息
      inif: {
        seatId: "", //库位id
        speed: "", //最大速度
      },
    };
  },

  created() {
    this.getGain(); //页面一打开就获取库位列表数据
    this.gain(); //获取地图信息
  },
  // 注册列表每一项的点击事件
  methods: {
    //-----------------------------------------------------键盘区域事件
    // x轴输入框键盘
    Change(input) {
      // input 是当前点击按钮的值
      // this.inif.speed = input; //把点击的那一项的值赋值给输入框
      this.newList.x = input;
    },
    //y轴键盘的
    onChange(input) {
      this.newList.y = input;
    },
    //键盘的删除和确定事件
    onKeyPress(button) {
      if (button == "{enter}") {
        // 如果按确认键的相应操作
        this.yshow = false;
        this.xshow = false;
      }
      if (button == "{bksp}") {
        // 删除键的相应操作
      }
    },

    //子组件x轴的事件
    newxShow(val,newval) {
      //把子组件中传过来的值赋值给父组件中的变量
      this.xshow = val;
      this.yshow=newval
      console.log(val,newval,'x轴区域键盘');
    },

    //子组件y轴的事件
    newyShow(val,newval) {
      //把子组件中传过来的值赋值给父组件中的变量
      this.yshow = val;
      this.xshow=newval
      console.log(val,newval,'y轴区域键盘');
    },

    //关闭x轴
    closeX(val){
      this.xshow=val
    },
    //关闭Y轴
    closeY(val){
      this.yshow=val
    },
    //-----------------------------------------------------键盘区域事件

    //获取地图信息
    gain() {
      let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取到本地服务器的地址
        //     let ws = new WebSocket("ws://192.168.20.101:10009"); //发送webSocket请求
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        //当服务器有消息，就会自动调用这个函数 //e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.x = res.fused_x; //给x轴坐标赋值
          this.y = res.fused_y; //给y轴坐标赋值
          this.angle = res.fused_angle; //给y轴坐标赋值
        } else if (res.uri == "/sirius/topics/slam_grid_map") {
          this.newx = res.info.origin.position.x;
          this.newy = res.info.origin.position.y;
          this.width = res.info.width; //保存宽度
          this.height = res.info.height; //保存高度
        }
      };
    },

    //--------------------------------删除按钮事件
    remove(id) {
      //提示框
      Dialog.confirm({
        title: "删除充电点",
        message: `你确定要删除id为${id}充电点嘛`,
      })
        .then(async () => {
          try {
            let res = await removeApi({
              id,
            });
            //提示用户删除成功
            this.$toast.success("删除成功");
            //调用获取库位点数据进行刷新页面
            this.getGain();
            this.newList=''
            this.newactive=false
          } catch {
            //删除失败
            this.$toast.fail("删除失败");
          }
        })
        .catch(() => {
          //提示用户点击了取消
          this.$toast.success("取消成功");
        });
    },
    //-----------------------------------新建充电点位
    async record() {
      //捕获错误
      try {
        let res = await recordApi({
           x: this.x, //参数x轴坐标
          y: this.y, //参数y轴坐标
          angle: this.angle, //参数y轴坐标
          // x: 3888,
          // y: 3999,
          type: 3,
        });
        //提示用户
        this.$toast.success("新增成功");
        //掉用户获取库位点的数据键刷新页面
        this.getGain();
      } catch {
        //提示用户
        this.$toast.fail("新增失败");
      }
    },

    // 点击切换根据id进行切换
    examine(id, item) {
      //把点击的这一项赋值给activeIndex下标
      this.activeIndex = id;
      this.newList = item; //把点击的这一项的信息赋值到新数组中
      console.log(this.newList, "点击的这一项数据");
      this.newactive=true
    },

    //获取库位点的数据列表
    async getGain() {
      let res = await gainApi(); //发送请求获取数据
      let newres = yaml.load(res.data); //将获取到的数据进行yaml格式的转换
      this.kuewiID = newres; //保存库位点的信息
      //判断如果返回的数据等于undefined直接retrun不进行下一步
      if (newres == undefined) return;
      this.recordList = newres.filter((item) => {
        //使用fliter进行筛选看里面的每一项type是不是等于3，等于3就返回这个对象内容信息
        return item.type == 3; //判断等于三
      });
      console.log(this.recordList, "充电点数据");
    },

    //点击新建充电点
    addnew() {
      this.formShow = true; //把表单状态改为显示
      this.$store.commit("changShow", false);
    },
    //----------------------------------点击表单页导航栏左侧触发事件
    onClickLeft() {
      this.formShow = false; //把表单改为隐藏
      this.$store.commit("changShow", true); //修改二级路由的显示与隐藏
      this.inif.seatId = ""; //清除输入框内容id
      this.inif.speed = ""; //清除最大速度值
      //清空正则验证
      this.formKey++;
      //把单选也清空
      this.index = "";
    },

    //----------------------------------点击提交按钮发送请求
    async onSubmit() {
      // 使用数组中的findIndx方法进行遍历判断数组的id和名称是不是等于我输入的id和名称
      let index = this.recordList.filter((item) => {
        return item.id == this.inif.seatId;
      });
      //如果返回值是0就证明有一项是重复的
      if (index != "") {
        // 提示用户
        this.$toast.fail("id重复!!!");
        // 直接retur结束后面的操作
        return;
      }
      //筛选出不能和库位点id相同的id
      let newIndex = this.kuewiID.filter((item) => {
        return item.id == this.inif.seatId;
      });
      // 判断id不等于空
      if (newIndex != "") {
        // 提示用户
        this.$toast.fail("和库位点id重复");
        //直接return不执行后面代码
        return;
      }
      // 判断用户输入的id不能大于10000
      if (this.inif.seatId >= 10000) {
        //提示用户
        this.$toast.fail("id不能大于10000!");
        // 直接retrun不会执行后面代码
        return;
      }
      //判断速度如果大于等于3000提示用户
      if (this.inif.speed >= 3000) {
        //提示用户
        this.$toast.fail("最大速度不能大于3000");
        //直接return不执行后面代码
        return;
      }
      //发送请求提交数据
      let res = await recordApi({
        id: this.inif.seatId, //传入id
        x: this.x / 10 - this.newx * 100, //传入x轴坐标
        y: this.y / 10 - this.newy * 100, //传入y轴坐标
        type: 3, //传入单选的类型
        vel_max: this.inif.speed, //传入速度
        forbid: 0, //传入参数
        shutoff: 0, //传入参数
        closed: 0, //传入参数
      });
      //把发送的yaml格式的数据转换成对象键值对形式
      let newres = yaml.load(res.config.data);
      if (newres.tyep == 3) {
        //把转换后的数据追加到recordList数组中
        this.recordList.push(newres);
        // //提示用户新建成功
        this.$toast.success("新建成功");
        // //点击提交完数据后把form表单的状态改为false
        this.formShow = false;
        // //把二级路由导航栏的状态改为true
        this.$store.commit("changShow", true);
        // //提交完成后把表单数据清空
        this.inif.seatId = "";
        this.inif.speed = "";
        //把单选也清空
        this.radio = "";
        return;
      } else {
        // //提示用户新建成功
        this.$toast.success("新建成功");
        // //点击提交完数据后把form表单的状态改为false
        this.formShow = false;
        // //把二级路由导航栏的状态改为true
        this.$store.commit("changShow", true);
        // //提交完成后把表单数据清空
        this.inif.seatId = "";
        this.inif.speed = "";
        //把单选也清空
        this.index = "";
      }
      //调用获取数据的方法刷新页面
      this.getGain();
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar__content {
  background-color: skyblue;
  height: 60px !important;
}
.van-nav-bar__title {
  font-size: 24px !important;
  color: white !important;
}
.recharge {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100%;
  background-color: #12151a;
  .box {
    height: 100vh;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    .myimg {
      flex: 1;
    }
    .myListtwo {
      height: 100%;
      margin-right: 40px;
      margin-left: 10px;
      .myList {
        height: 250px;
        // background-color: #1a1c25;
        overflow-x: hidden;
        overflow-y: auto;
        .myList::-webkit-scrollbar {
          display: none;
        }
        .van-cell {
          text-align: center;
          width: 180px !important;
          background-color: #1a1c25;
          font-size: 16px;
          line-height: 30px;
          // font-weight: 700;
          color: #fff;
          &.active {
            color: #00c3c3 !important;
            background-color: #030305 !important;
            position: relative;
            &::before {
              content: "";
              width: 5px;
              height: 60px;
              
              background-color: skyblue;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
        // .newAdd {
        //   span {
        //     width: 180px !important;
        //     background-color: #181a23;
        //     padding: 10px 28px;
        //     border-radius: 10px;
        //     font-size: 18px;
        //   }
        // }
      }
    }
  }
}
.van-popup {
  width: 800px;
  height: 500px;
  border: 2px solid black;
}
.van-form {
  .van-field {
    width: 250px !important;
  }
  .van-cell {
    margin-left: 20px !important;
  }
}
.van-field__control {
  width: 300px !important;
}
.boxList .van-form .van-field[data-v-40d3e1c4] {
  width: 400px !important;
}
::v-deep .van-cell {
  padding: 10px !important;
}
#new {
  width: 180px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 44px;
  font-weight: 500;
}
#new:hover {
  background-color: #fac018 !important;
}

/deep/::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background: #33333300;
  /**/
}
/deep/::-webkit-scrollbar-track {
  background: rgb(239, 239, 239, 0);
  border-radius: 2px;
}
/deep/::-webkit-scrollbar-thumb {
  background: rgba(192, 176, 33);
  border-radius: 10px;
}
/deep/::-webkit-scrollbar-thumb:hover {
  background: #33333300;
}
/deep/::-webkit-scrollbar-corner {
  background: #33333300;
}
/deep/::-webkit-scrollbar-track {
  background: #33333300;
}
.keyboard-mask {
  width: 80%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 20%;
  z-index: 4000;
}
.recharge{

/deep/.keyboard{
    margin: 0px;
    margin-right: 200px;
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 42px 0px;
    width: 810px;
    height: 150px;
    li{
      text-indent: 0;
        float: left;
        text-align: center;
        margin: 0 10px 10px 0;
        width: 70px;
        height: 25px;
        line-height: 25px;
        background: #fff;
        border-radius: 15px;
        font-size: 18px;
        font-weight: 500;
        box-shadow: 0 3px 6px 0px #cac9c9;
    }
    li:nth-child(n+11){
        margin-left: -2px!important;
    }
    li:nth-child(-n+27):nth-child(n+20){
        margin-left: 5px!important;
    }
    li:nth-child(38){
      width: 150px;
      text-indent: 2.5em;
    }
}
}
</style>
